<template>
  <el-row type="flex" justify="center" align="middle">
    <el-form :model="input_user">
      <el-form-item label="用户名" label-width="80px">
        <el-input
          v-model="input_user.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="80px">
        <el-input
          v-model="input_user.password"
          placeholder="请输入密码"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
      <div>{{ error }}</div>
    </el-form>
  </el-row>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      input_user: {
        username: 'admin',
        password: '123456'
      },
      isError: false
    }
  },
  computed: {
    error() {
      return this.isError ? '登陆失败' : ''
    }
  },
  methods: {
    async onSubmit() {
      const { data } = await axios.get('/data/user.json')
      if (
        this.input_user.username === data.username &&
        this.input_user.password === data.password
      ) {
        console.log('登陆成功')
        this.isError = false
        this.$store.commit('setTocken', data.username)
        this.$store.commit('setUser', data)
        // 页面跳转
        this.$router.push('/')
      } else {
        console.log('登陆失败')
        this.isError = true
      }
    }
  }
}
</script>
